import React from 'react';
import { Chart } from 'ant-design-charts';
 
const MyChart = () => {
  // 图表数据
  const data = [
    { type: 'A', value: 10 },
    { type: 'B', value: 22 },
    { type: 'C', value: 20 },
    // ... 更多数据
  ];
 
  // 图表配置
  const config = {
    // 配置选项
  };
 
  // 图表容器的引用
  const chartRef = React.useRef(null);
 
  // 当容器就绪后，挂载图表
  React.useEffect(() => {
    chartRef.current = new Chart({
      container: 'myChartContainer', // 容器ID
      autoFit: true,
      height: 500,
    });
 
    chartRef.current.data(data);
    chartRef.current.scale({
      value: {
        min: 0,
        nice: true,
      },
    });
    chartRef.current.tooltip({
      showMarkers: false,
    });
    chartRef.current.interaction({
      type: 'interval-select',
      action: 'data-zoom', // 数据区间选择后进行区域缩放
      startEnd: [0, 1], // 选择的数据范围为 0 到 1
    });
    chartRef.current.render();
  }, []);
 
  return (
    <div>
      <div id="myChartContainer" style={{ width: '100%', height: '500px' }} />
    </div>
  );
};
 
export default MyChart;



// https://v0-charts.ant.design/guide/case#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E8%A1%A8%E6%9B%B4%E6%96%B0